<template>
    <a-card>
        <div class="table-operations">
            <a-button v-permission="['menu:add']" type="primary" @click="addModalBt">新增菜单</a-button>
        </div>
        <a-table :columns="columns" 
      :data-source="datasource" 
      :expanded-row-keys="expandedKeys"
      :key="tableKey" 
      bordered
      size="small" 
      :pagination='false' 
      :indentSize="10"
      @expand="handleExpand"
      rowKey="id">

            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'icon'">

                    <ws-icon :name="record.icon" />
                </template>
                <template v-if="column.key === 'type'">

                    <a-tag color="green" v-if="record.type == 1">菜单</a-tag>
                    <a-tag color="blue" v-if="record.type == 2">按钮</a-tag>
                </template>
                <template v-if="column.key === 'createTime'">

                    {{ $formatDate(record.createTime) }}
                </template>
                <template v-if="column.key === 'action'">
                    <div>
                        <WsAuthority permissions="menu:add">

                            <a-button type="link" primary @click="addModalBt(record)">添加子菜单</a-button>
                        </WsAuthority>
                        <WsAuthority permissions="menu:update">

                            <a-button type="link" primary @click="updateMenuBt(record.id)">编辑</a-button>
                        </WsAuthority>
                        <WsAuthority permissions="menu:delete">
                            <a-popconfirm title="请确定是否删除这条数据?" ok-text="确定" cancel-text="取消"
                                @confirm="deleteMenuBt(record.id)">
                                <a-button type="link" danger>删除</a-button>
                            </a-popconfirm>
                        </WsAuthority>

                    </div>
                </template>
            </template>
        </a-table>
     
        
        <MenuModal ref="modalRef" @refresh="refresh" />
    </a-card>
</template>
<script setup>
import { columns } from '.'
import { pageN, deleteMenu, menuDetail } from '@/api/menu'
import MenuModal from './component/modal.vue'
const datasource = ref([]);
const modalRef = ref();
//用于监听表格数据变化 展开所有的素具
const tableKey = ref();
const expandedKeys = ref([]); // 新增响应式变量
//打开弹框
const addModalBt = record => {
    modalRef.value.openModal(true, record)
}
//更新用户弹框
const updateMenuBt = async id => {
    const { data } = await menuDetail(id);
    modalRef.value.openModal(false, data)
}

//删除菜单的button
const deleteMenuBt = async id => {
    await deleteMenu(id);
    refresh()
}

const handleExpand = (expanded, record) => {
    console.log(expanded)
  if (expanded) {
    expandedKeys.value.push(record.id); // 只保持当前节点展开
  } else {
    expandedKeys.value = expandedKeys.value.filter(key => key !== record.id);
  }
};
const refresh =  () => {
    pageN().then(res=>{
        const  data  = res.data;
        datasource.value = data;
        expandedKeys.value = []; // 重置展开状态
        tableKey.value = +new Date(); // 用时间戳强制刷新

    })
}


onMounted(() => {
    refresh()
})
</script>